<template>
	<view class="user-wrapper">
		<view class="user-info_wrap" v-if="userInfo.baseInfo">
			<view class="user-info" @click="jumpChangeUserInfo">
				<view class="user_avatar">
					<image class="avatar" :src="userInfo.baseInfo.avatar" mode=""></image>
					<image class="grade" :src="getImage" mode=""></image>
				</view>
				<view class="user_name">
					{{userInfo.baseInfo.nickname}}
				</view>
			</view>
		</view>
		<view class="important_handle_wrap">
			<view class="important_handle_item" @click="jumpSecurityPage">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/anquan.svg"></image>
				<text>安全中心</text>
			</view>
			<view class="important_handle_item" @click="jumpInvitePage">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/invite.svg"></image>
				<text>邀请好友</text>
			</view>
			<view class="important_handle_item" @click="jumpContactUsPage">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/contact.svg"></image>
				<text>联系我们</text>
			</view>
		</view>
		<view class="handle_wrap">
			<view class="handle_item--top">
				<view class="handle_item" @click="jumpRealNamePage">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/renzheng.svg"></image>
						<text>实名认证</text>
					</view>
					<view class="handle_right">
						<text>{{realNameStatus}}</text>
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg"></image>
					</view>
				</view>
				<view class="handle_item" @click="onJumphandle(0)">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/okCode.png"></image>
						<text>OK账户</text>
					</view>
					<view class="handle_right">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg"></image>
					</view>
				</view>
				<view class="handle_item" @click="onJumphandle(1)">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/fankui.svg"></image>
						<text>反馈中心</text>
					</view>
					<view class="handle_right">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg"></image>
					</view>
				</view>
				<view class="handle_item item_top--last" @click="onJumphandle(2)">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/zhidao.svg"></image>
						<text>操作指导</text>
					</view>
					<view class="handle_right">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg"></image>
					</view>
				</view>
			</view>
			
			<view class="handle_item--bottom">
				<view class="handle_item" @click="onJumphandle(3)">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/help.png"></image>
						<text>帮助中心</text>
					</view>
					<view class="handle_right">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg"></image>
					</view>
				</view>

				<view class="handle_item item_bottom--last" @click="onVersionUpdate">
					<view class="handle_left">
						<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/banben.png"></image>
						<text>版本</text>
					</view>
					<view class="handle_right">
						<text>{{appVersion}}</text>
					</view>
				</view>
			</view>
		</view>
		<button class="exit_login" type="warn" @click="onExitLogin">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				// 等级图标
				picture: [{
						id: 0,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v.png'
					},
					{
						id: 1,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-1.png'
					},
					{
						id: 2,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-2.png'
					},
					{
						id: 3,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-3.png'
					},
					{
						id: 4,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-4.png'
					},
					{
						id: 5,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-6.png'
					}
				],
				appVersion: '',
				realNameStatus: '' //实名认证状态
			}
		},
		// 计算等级图片路径
		computed: {
			getImage() {
				if (this.userInfo.baseInfo) {
					for (var i = 0; i < this.picture.length; i++) {
						if (this.userInfo.baseInfo.grade.substr(1) == this.picture[i].id) {
							return this.picture[i].name
						}
					}
				}
			}
		},
		onLoad(){
			this.appVersion = uni.getStorageSync('app_version').app_version;
		},
		onShow() {
			this.getUserInfo();
			this.getRealNameStatus();
		},
		onPullDownRefresh() {
			this.getUserInfo();
			this.getRealNameStatus();
		},
		methods: {
			// 修改账户页面
			jumpChangeUserInfo() {
				uni.navigateTo({
					url: '/pages/user/userInfo'
				})
			},
			// 跳转安全中心
			jumpSecurityPage() {
				uni.navigateTo({
					url: '/pages/user/security'
				})
			},
			// 跳转邀请好友页面
			jumpInvitePage() {
				uni.navigateTo({
					url: '/pages/user/invite'
				})
			},
			// 跳转联系我们页面
			jumpContactUsPage() {
				uni.navigateTo({
					url: '/pages/user/contactUs'
				})
			},
			// 跳转实名认证
			jumpRealNamePage(){
				if(this.realNameStatus==='未认证' || this.realNameStatus==='已驳回'){
					uni.navigateTo({
						url: '/pages/user/realName'
					})
				}
			},
			// 跳转操作
			onJumphandle(index) {
				switch (index) {
					// 跳转ok账号页面
					case 0:
						if(this.userInfo.okAccount.isBind){
							uni.navigateTo({
								url: '/pages/user/getOkCode'
							})
						}else{
							uni.navigateTo({
								url: '/pages/user/setOkCode'
							})
						}
						break;
					// 反馈中心
					case 1:
						uni.showToast({
							title:'正在开发中...',
							icon:'none'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/user/guidance'
						})
						break;
					case 3:
						// 跳转帮助中心页面
						uni.navigateTo({
							url: '/pages/user/help'
						})
						break;
				}
			},
			// 监听版本更新
			onVersionUpdate() {
				// #ifdef  APP-PLUS
				// 获取当前版本号
				let req = {
					appid: plus.runtime.appid,
					version: plus.runtime.version
				};
				// 判断是否更新
				this.$api.getUpdate({}, res => {
					if (res.data.type == 'ok') {
						let newVersion = res.data.message.app_version; // 后台返回回来的版本
						uni.setStorageSync('app_version', res.data.message);
						// 如果版本有差异，则继续判断
						console.log(newVersion)
						if (newVersion != req.version) {
							uni.navigateTo({
								url: '/pages/update/index'
							})
						} else {
							uni.showToast({
								title: '当前是最新版本',
								icon: 'none'
							})
						}
					}
				})
				// #endif
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo({}, (res) => {
					if (res.data.type == 'ok') {
						this.userInfo = res.data.message;
						uni.setStorageSync('user_info', res.data.message); //存储用户信息
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					}
				})
			},
			// 获取用户实名认证状态
			getRealNameStatus(){
				this.$api.getRealNameStatus({},res=>{
					if(res.data.type === 'ok'){
						switch(res.data.message.status){
							case 0:
								this.realNameStatus = '未认证'
								break
							case 1:
								this.realNameStatus = '已申请'
								break
							case 2:
								this.realNameStatus = '已认证'
								break
							case 3:
								this.realNameStatus = '已驳回'
								break							
						}
					}
				})
			},
			// 退出登录
			onExitLogin() {
				uni.showModal({
					content: '确定要退出吗?',
					confirmColor: '#000',
					cancelText: "确定",
					cancelColor: "#E03E4D",
					confirmText: "取消",
					success: (val) => {
						if (!val.confirm) {
							this.$api.setLoginOut({}, (res) => {
								if (res.data.type == 'ok') {
									uni.removeStorageSync("user_token");
									uni.removeStorageSync("user_info");
									uni.reLaunch({
										url: '/pages/login/index'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-wrapper {
		padding-bottom: 50upx;
	}

	.user-info_wrap {
		position: relative;
		height: 420upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/header.jpg');
		background-size: cover;
		font-size: 15px;

		.user-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content:center;

			.user_avatar {
				position: relative;
				width: 120upx;
				height: 120upx;
				line-height: 120upx;
				margin:20upx 0;
				.avatar {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					border: 4upx solid #353653;
				}

				.grade {
					display: block;
					width: 48upx;
					height: 48upx;
					position: absolute;
					right: -10upx;
					bottom: 5upx;
				}
			}

			.user_name {
				color: #FFFFFF;
				font-size: 18px;
			}
		}
	}

	.important_handle_wrap {
		position: absolute;
		top: 340upx;
		left: 4%;
		z-index:99;
		width:92%;
		height: 180upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20upx;
		box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
		border-radius:10upx;
		background-color: #FFFFFF;

		.important_handle_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 50upx;
				height: 50upx;
				margin-bottom: 10upx;
			}

			text {}
		}
	}

	.handle_wrap {
		width:92%;
		margin: 120upx auto 0 auto;
		
		.handle_item--top,
		.handle_item--bottom{
			box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
			border-radius:10upx;
			overflow: hidden;
			.handle_item {
				position:relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100upx;
				padding: 0 20upx;
				background-color: #FFFFFF;

				.handle_left {
					display: flex;
					align-items: center;
					image {
						width: 30upx;
						height: 30upx;
						margin: 0 10upx;
					}
				}

				.handle_right {
					display: flex;
					align-items: center;
					margin: 0 10upx;
					text{
						color:#999999;
					}
					image {
						width: 20upx;
						height: 20upx;
						margin-left:20upx;
					}
				}
			}
			.handle_item:after{
				content:"";
				position:absolute;
				bottom:0;
				left:0;
				right:0;
				border-top:1px solid rgba(0,0,0,0.1);
				-webkit-transform:scaleY(.5);
				-webkit-transform-origin:0 0;
			}
			.item_top--last:after{
				display: none;
			}
			.item_bottom--last:after{
				display: none;
			}
		}
		.handle_item--top {
			margin-bottom: 20upx;
		}
	}

	.exit_login {
		margin: 50upx auto;
		width: 85%;
		border-radius: 50upx;
		background-color: #E03E4D;
	}
</style>
